<template>
  <div class="salary-calculator">
    <div class="app-header">
      <div class="header-content">
        <h1>摸鱼工资计算器</h1>
        <p class="subtitle">看看你每秒赚多少钱</p>
      </div>
    </div>

    <div class="main-content">
      <van-form @submit="onSubmit" class="form-container" v-if="!isCalculating">
        <div class="form-title">填写工作信息</div>
        
        <!-- 月薪输入 -->
        <van-field
          v-model="formData.monthlySalary"
          type="number"
          label="月薪(元)"
          placeholder="请输入月薪"
          :rules="[{ required: true, message: '请输入月薪' }]"
          class="custom-field"
        >
          <template #left-icon>
            <van-icon name="cash-back-record" class="field-icon" />
          </template>
        </van-field>

        <!-- 工作日设置 -->
        <van-field
          readonly
          name="workdays"
          label="工作日"
          :model-value="formData.workdaysText"
          placeholder="请选择工作日"
          @click="showWorkdayPicker = true"
          class="custom-field"
        >
          <template #left-icon>
            <van-icon name="calendar-o" class="field-icon" />
          </template>
        </van-field>
        
        <!-- 上班时间设置 -->
        <van-field
          readonly
          name="startTime"
          label="上班时间"
          :model-value="formData.startTimeText"
          placeholder="请选择上班时间"
          @click="showStartTimePicker = true"
          class="custom-field"
        >
          <template #left-icon>
            <van-icon name="clock-o" class="field-icon" />
          </template>
        </van-field>
        
        <!-- 下班时间设置 -->
        <van-field
          readonly
          name="endTime"
          label="下班时间"
          :model-value="formData.endTimeText"
          placeholder="请选择下班时间"
          @click="showEndTimePicker = true"
          class="custom-field"
        >
          <template #left-icon>
            <van-icon name="clock" class="field-icon" />
          </template>
        </van-field>

        <div class="submit-btn-wrapper">
          <van-button round block type="primary" native-type="submit" class="submit-btn">
            开始计算
          </van-button>
        </div>
      </van-form>

      <!-- 弹出层 -->
      <van-popup v-model:show="showWorkdayPicker" position="bottom" round>
        <van-picker
          :columns="workdayOptions"
          @confirm="onWorkdayConfirm"
          @cancel="showWorkdayPicker = false"
          title="选择工作日"
          :show-toolbar="true"
          :default-index="formData.workdays === 5 ? 0 : formData.workdays === 6 ? 1 : 0"
        />
      </van-popup>

      <van-popup v-model:show="showStartTimePicker" position="bottom" round>
        <van-time-picker
          v-model="startTime"
          title="选择上班时间"
          @confirm="onStartTimeConfirm"
          @cancel="showStartTimePicker = false"
          :columns-type="['hour', 'minute']"
          :min-hour="7"
          :max-hour="12"
        />
      </van-popup>

      <van-popup v-model:show="showEndTimePicker" position="bottom" round>
        <van-time-picker
          v-model="endTime"
          title="选择下班时间"
          @confirm="onEndTimeConfirm"
          @cancel="showEndTimePicker = false"
          :columns-type="['hour', 'minute']"
          :min-hour="16"
          :max-hour="23"
        />
      </van-popup>
      
      <!-- 2048游戏弹出层 -->
      <van-popup 
        v-model:show="showGame" 
        position="bottom" 
        round 
        :style="{ height: '75vh', width: '100%', maxHeight: '75vh', overflow: 'auto', paddingBottom: '0' }"
        class="game-popup"
      >
        <div class="game-popup-header">
          <div class="game-popup-title">
            <span class="game-title-number">2048</span> 小游戏
          </div>
          <van-icon name="cross" class="close-icon" @click="showGame = false" />
        </div>
        <Game2048 ref="gameRef" />
      </van-popup>

      <!-- 计算结果展示 -->
      <div v-if="isCalculating" class="result-container">
        <!-- 今日已赚卡片 -->
        <div class="earned-card">
          <div class="earned-title">今日已赚</div>
          <div class="earned-amount">{{ todayEarnedFormatted }}</div>
          
          <!-- 实时工资进度条 -->
          <div class="progress-wrapper">
            <van-progress 
              :percentage="workProgressPercentage" 
              :show-pivot="false"
              color="#4fc08d"
              track-color="rgba(79, 192, 141, 0.2)"
              stroke-width="8px"
            />
            <div class="progress-info">
              <span>{{ formattedStartTime }}</span>
              <span>{{ formattedEndTime }}</span>
            </div>
          </div>
        </div>
        
        <!-- 工资明细卡片 -->
        <div class="detail-card">
          <div class="card-title">工资明细</div>
          <div class="detail-grid">
            <div class="detail-item">
              <div class="detail-label">每天</div>
              <div class="detail-value">{{ dailySalaryFormatted }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">每小时</div>
              <div class="detail-value">{{ hourlySalaryFormatted }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">每分钟</div>
              <div class="detail-value">{{ minuteSalaryFormatted }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">每秒</div>
              <div class="detail-value">{{ secondSalaryFormatted }}</div>
            </div>
          </div>
        </div>
        
        <!-- 倒计时信息卡片 -->
               <div class="countdown-card">
          <div class="card-title">倒计时</div>
          <div class="countdown-grid">
            <div class="countdown-item">
              <div class="countdown-icon">
                <van-icon name="clock-o" />
              </div>
              <div class="countdown-info">
                <div class="countdown-label">距离下班</div>
                <div class="countdown-value">{{ timeToOffWork }}</div>
              </div>
            </div>
            
            <div class="countdown-item">
              <div class="countdown-icon">
                <van-icon name="calendar-o" />
              </div>
              <div class="countdown-info">
                <div class="countdown-label">距离周五</div>
                <div class="countdown-value">{{ daysToFriday }}</div>
              </div>
            </div>
            
            <div class="countdown-item">
              <div class="countdown-icon">
                <van-icon name="clock" />
              </div>
              <div class="countdown-info">
                <div class="countdown-label">距离下月</div>
                <div class="countdown-value">{{ daysToNextMonth }}</div>
              </div>
            </div>
            
            <div class="countdown-item holiday-item">
              <div class="countdown-icon holiday-icon">
                <van-icon name="gift-o" />
              </div>
              <div class="countdown-info">
                <div class="countdown-label">距离{{ nextHoliday.name }}</div>
                <div class="countdown-value">{{ nextHoliday.daysLeft }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 游戏按钮 -->
        <div class="game-button-container">
          <div class="game-button" @click="showGame = true">
            <van-icon name="game-o" class="game-icon" />
            <span>玩一玩小游戏</span>
          </div>
        </div>
        
        <!-- 重置按钮 -->
        <div class="reset-btn-wrapper">
          <van-button round block plain type="primary" @click="isCalculating = false" class="reset-btn">
            重新设置
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import { showToast } from "vant/es";
import Game2048 from "./Game2048.vue";

// 表单数据
const formData = reactive({
  monthlySalary: "",
  workdays: 5, // 默认每周工作5天
  workdaysText: "每周5天",
  startTime: "09:00",
  startTimeText: "09:00",
  endTime: "18:00",
  endTimeText: "18:00",
});

// 工作日选项
const workdayOptions = [
  { text: "每周5天", value: 5 },
  { text: "每周6天", value: 6 },
];

// 时间选择器状态
const showWorkdayPicker = ref(false);
const showStartTimePicker = ref(false);
const showEndTimePicker = ref(false);
const startTime = ref(["09", "00"]);
const endTime = ref(["18", "00"]);

// 计算状态
const isCalculating = ref(false);
const timer = ref(null);
const todayEarned = ref(0);
const currentTime = ref(new Date()); // 添加当前时间响应式变量，用于触发倒计时更新

// 游戏相关
const showGame = ref(false);
const gameRef = ref(null);

// 工作日选择确认
const onWorkdayConfirm = (value) => {
  formData.workdays = value["selectedOptions"][0].value || 5;
  formData.workdaysText = value["selectedOptions"][0].text || "每周5天";
  showWorkdayPicker.value = false;
};

// 上班时间选择确认
const onStartTimeConfirm = (value) => {
  // 直接使用当前绑定的startTime值
  const hour = startTime.value[0].padStart(2, "0");
  const minute = startTime.value[1].padStart(2, "0");
  formData.startTime = `${hour}:${minute}`;
  formData.startTimeText = formData.startTime;

  showStartTimePicker.value = false;
  // 显示提示
  showToast(`上班时间已设置为 ${formData.startTime}`);
};

// 下班时间选择确认
const onEndTimeConfirm = (value) => {
  // 直接使用当前绑定的endTime值
  const hour = endTime.value[0].padStart(2, "0");
  const minute = endTime.value[1].padStart(2, "0");
  formData.endTime = `${hour}:${minute}`;
  formData.endTimeText = formData.endTime;

  showEndTimePicker.value = false;
  // 显示提示
  showToast(`下班时间已设置为 ${formData.endTime}`);
};

// 计算每月工作天数
const workDaysPerMonth = computed(() => {
  return formData.workdays * 4 + Math.floor(formData.workdays / 5); // 大约每月工作天数
});

// 计算每天工作时长（小时）
const workHoursPerDay = computed(() => {
  const start = formData.startTime.split(":");
  const end = formData.endTime.split(":");

  const startHour = parseInt(start[0]) + parseInt(start[1]) / 60;
  const endHour = parseInt(end[0]) + parseInt(end[1]) / 60;

  return endHour - startHour;
});

// 计算每天工资
const dailySalary = computed(() => {
  if (!formData.monthlySalary) return 0;
  return parseFloat(formData.monthlySalary) / workDaysPerMonth.value;
});

// 计算每小时工资
const hourlySalary = computed(() => {
  return dailySalary.value / workHoursPerDay.value;
});

// 计算每分钟工资
const minuteSalary = computed(() => {
  return hourlySalary.value / 60;
});

// 计算每秒工资
const secondSalary = computed(() => {
  return minuteSalary.value / 60;
});

// 格式化金额
const formatMoney = (amount) => {
  return amount.toFixed(4) + " 元";
};

// 格式化后的工资数据
const dailySalaryFormatted = computed(() => formatMoney(dailySalary.value));
const hourlySalaryFormatted = computed(() => formatMoney(hourlySalary.value));
const minuteSalaryFormatted = computed(() => formatMoney(minuteSalary.value));
const secondSalaryFormatted = computed(() => formatMoney(secondSalary.value));
const todayEarnedFormatted = computed(() => formatMoney(todayEarned.value));

// 获取当前时间
const getCurrentTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, "0");
  const minutes = now.getMinutes().toString().padStart(2, "0");
  const seconds = now.getSeconds().toString().padStart(2, "0");
  return { hours, minutes, seconds, now };
};

// 判断当前是否在工作时间内
const isWorkingHours = () => {
  const { hours, minutes } = getCurrentTime();
  const currentTimeStr = `${hours}:${minutes}`;
  return (
    currentTimeStr >= formData.startTime && currentTimeStr <= formData.endTime
  );
};

// 计算今日已赚工资
const calculateTodayEarned = () => {
  if (!isCalculating.value) return;

  const { hours, minutes, seconds, now } = getCurrentTime();
  const currentTimeStr = `${hours}:${minutes}`;

  // 如果当前时间在工作时间内，计算已赚工资
  if (isWorkingHours()) {
    // 计算从上班开始到现在的秒数
    const startParts = formData.startTime.split(":");
    const startDate = new Date(now);
    startDate.setHours(parseInt(startParts[0]), parseInt(startParts[1]), 0, 0);

    const diffSeconds = Math.floor((now - startDate) / 1000);
    if (diffSeconds > 0) {
      todayEarned.value = secondSalary.value * diffSeconds;
    }
  } else if (currentTimeStr > formData.endTime) {
    // 如果已经下班，显示全天工资
    todayEarned.value = dailySalary.value;
  } else {
    // 如果还没上班，工资为0
    todayEarned.value = 0;
  }
};

// 计算距离下班还有多久
const timeToOffWork = computed(() => {
  // 使用currentTime响应式变量触发更新
  const now = currentTime.value;
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  const currentTimeStr = `${hours}:${minutes}`;

  if (currentTimeStr >= formData.endTime) {
    return "已下班";
  }

  if (currentTimeStr < formData.startTime) {
    return "还未上班";
  }

  const endParts = formData.endTime.split(":");
  const endDate = new Date(now);
  endDate.setHours(parseInt(endParts[0]), parseInt(endParts[1]), 0, 0);

  const diffMs = endDate - now;
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
  const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);

  return `${diffHours}小时${diffMinutes}分钟${diffSeconds}秒`;
});

// 计算距离周五还有多少天
const daysToFriday = computed(() => {
  const today = new Date().getDay(); // 0是周日，5是周五
  if (today === 5) return "今天就是周五";
  if (today === 6) return "昨天是周五";
  if (today === 0) return "还有5天";
  return `还有${5 - today}天`;
});

// 计算距离下个月还有多少天
const daysToNextMonth = computed(() => {
  const now = new Date();
  const currentMonth = now.getMonth();
  const currentYear = now.getFullYear();

  // 获取当月的最后一天
  const lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
  const daysLeft = lastDayOfMonth - now.getDate();

  return `还有${daysLeft}天`;
});

// 计算距离最近的法定节假日
const nextHoliday = computed(() => {
  const now = new Date();
  const currentYear = now.getFullYear();
  const currentMonth = now.getMonth();
  const currentDate = now.getDate();

  // 2025年中国法定节假日列表 (公历日期)
  const holidays = [
    { name: "元旦", date: new Date(2025, 0, 1) },
    { name: "春节", date: new Date(2025, 0, 29) }, // 2025年春节（农历正月初一）
    { name: "清明节", date: new Date(2025, 3, 5) }, // 2025年清明节
    { name: "劳动节", date: new Date(2025, 4, 1) },
    { name: "端午节", date: new Date(2025, 4, 31) }, // 2025年端午节（农历五月初五）
    { name: "中秋节", date: new Date(2025, 8, 6) }, // 2025年中秋节（农历八月十五）
    { name: "国庆节", date: new Date(2025, 9, 1) },
  ];

  // 过滤出还未到来的节假日
  const futureHolidays = holidays.filter((holiday) => holiday.date > now);

  // 如果所有节假日都已过去，则考虑下一年的元旦
  if (futureHolidays.length === 0) {
    return {
      name: "元旦",
      daysLeft: `还有${Math.ceil(
        (new Date(currentYear + 1, 0, 1) - now) / (1000 * 60 * 60 * 24)
      )}天`,
    };
  }

  // 按日期排序，找出最近的节假日
  futureHolidays.sort((a, b) => a.date - b.date);
  const closest = futureHolidays[0];

  // 计算天数差异
  const diffDays = Math.ceil((closest.date - now) / (1000 * 60 * 60 * 24));

  return {
    name: closest.name,
    daysLeft: `还有${diffDays}天`,
  };
});

// 计算工作进度百分比
const workProgressPercentage = computed(() => {
  const { hours, minutes, seconds, now } = getCurrentTime();
  const currentTimeStr = `${hours}:${minutes}`;

  if (currentTimeStr < formData.startTime) return 0;
  if (currentTimeStr > formData.endTime) return 100;

  const startParts = formData.startTime.split(":");
  const endParts = formData.endTime.split(":");

  const startDate = new Date(now);
  startDate.setHours(parseInt(startParts[0]), parseInt(startParts[1]), 0, 0);

  const endDate = new Date(now);
  endDate.setHours(parseInt(endParts[0]), parseInt(endParts[1]), 0, 0);

  const totalWorkMs = endDate - startDate;
  const workedMs = now - startDate;

  return Math.min(100, Math.max(0, Math.floor((workedMs / totalWorkMs) * 100)));
});

// 格式化时间显示
const formattedStartTime = computed(() => formData.startTime);
const formattedEndTime = computed(() => formData.endTime);

// 表单提交
const onSubmit = () => {
  if (!formData.monthlySalary) {
    showToast("请输入月薪");
    return;
  }

  isCalculating.value = true;
  saveToLocalStorage();

  // 启动定时器，每秒更新一次
  if (timer.value) clearInterval(timer.value);
  timer.value = setInterval(() => {
    calculateTodayEarned();
    // 强制更新倒计时相关的计算属性
    const now = new Date();
    currentTime.value = now;
  }, 1000);

  // 初始计算一次
  calculateTodayEarned();
};

// 保存数据到本地存储
const saveToLocalStorage = () => {
  localStorage.setItem(
    "salaryCalculator",
    JSON.stringify({
      monthlySalary: formData.monthlySalary,
      workdays: formData.workdays,
      workdaysText: formData.workdaysText,
      startTime: formData.startTime,
      startTimeText: formData.startTimeText,
      endTime: formData.endTime,
      endTimeText: formData.endTimeText,
    })
  );
};

// 从本地存储加载数据
const loadFromLocalStorage = () => {
  try {
    const savedData = localStorage.getItem("salaryCalculator");
    if (savedData) {
      const data = JSON.parse(savedData);

      // 确保数据有效
      if (data) {
        // 设置默认值，防止数据不完整
        if (!data.startTime) data.startTime = "09:00";
        if (!data.startTimeText) data.startTimeText = "09:00";
        if (!data.endTime) data.endTime = "18:00";
        if (!data.endTimeText) data.endTimeText = "18:00";
        if (!data.workdays) data.workdays = 5;
        if (!data.workdaysText) data.workdaysText = "每周5天";

        // 应用数据
        Object.assign(formData, data);

        // 更新时间选择器的值
        try {
          if (formData.startTime && formData.startTime.includes(":")) {
            const startParts = formData.startTime.split(":");
            startTime.value = [startParts[0], startParts[1]];
          } else {
            startTime.value = ["09", "00"];
            formData.startTime = "09:00";
            formData.startTimeText = "09:00";
          }

          if (formData.endTime && formData.endTime.includes(":")) {
            const endParts = formData.endTime.split(":");
            endTime.value = [endParts[0], endParts[1]];
          } else {
            endTime.value = ["18", "00"];
            formData.endTime = "18:00";
            formData.endTimeText = "18:00";
          }
        } catch (e) {
          console.error("时间格式处理错误:", e);
          // 重置为默认值
          startTime.value = ["09", "00"];
          endTime.value = ["18", "00"];
          formData.startTime = "09:00";
          formData.startTimeText = "09:00";
          formData.endTime = "18:00";
          formData.endTimeText = "18:00";
        }

        // 如果有月薪，自动开始计算
        if (formData.monthlySalary) {
          onSubmit();
        }
      }
    }
  } catch (error) {
    console.error("加载本地存储数据错误:", error);
    // 出错时使用默认值
    formData.startTime = "09:00";
    formData.startTimeText = "09:00";
    formData.endTime = "18:00";
    formData.endTimeText = "18:00";
    formData.workdays = 5;
    formData.workdaysText = "每周5天";
  }
};

// 组件挂载时
onMounted(() => {
  loadFromLocalStorage();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<style>
/* 全局变量 */
:root {
  --primary-color: #4fc08d;
  --secondary-color: #1989fa;
  --text-color: #323233;
  --text-light: #969799;
  --card-bg: #ffffff;
  --app-bg: #f7f8fa;
  --border-radius: 12px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 移除滚动条 */
::-webkit-scrollbar {
  display: none;
}

/* 基础样式 */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.salary-calculator {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB",
    "Microsoft Yahei", sans-serif;
  background-color: var(--app-bg);
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  color: var(--text-color);
  padding-bottom: 24px;
}

/* 头部样式 */
.app-header {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  );
  color: white;
  padding: 24px 16px;
  border-radius: 0 0 24px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  width: 100%;
  box-sizing: border-box;
}

.header-content {
  max-width: 540px;
  margin: 0 auto;
  text-align: center;
}

.app-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.subtitle {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

/* 主内容区域 */
.main-content {
  max-width: 540px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  width: 100%;
  -webkit-overflow-scrolling: touch; /* iOS滚动优化 */
}

@media (max-width: 480px) {
  .main-content {
    padding: 0 12px;
  }
}

/* 表单样式 */
.form-container {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 20px 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  width: 100%;
  box-sizing: border-box;
}

.form-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-color);
  text-align: center;
}

.custom-field {
  margin-bottom: 16px;
}

.field-icon {
  color: var(--primary-color);
  font-size: 18px;
}

.submit-btn-wrapper {
  margin-top: 24px;
}

.submit-btn {
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color)
  );
  border: none;
}

/* 结果展示样式 */
.result-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.earned-card,
.detail-card,
.countdown-card {
  background-color: var(--card-bg);
  border-radius: var(--border-radius);
  padding: 20px;
  box-shadow: var(--shadow);
  width: 100%;
  box-sizing: border-box;
}

.earned-card {
  text-align: center;
}

.earned-title {
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 8px;
}

.earned-amount {
  font-size: 36px;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 16px;
}

.progress-wrapper {
  margin-top: 16px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-light);
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-color);
  text-align: center;
}

/* 工资明细网格 */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 360px) {
  .detail-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

.detail-item {
  background-color: rgba(79, 192, 141, 0.05);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.detail-label {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.detail-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
}

/* 倒计时网格 */
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.countdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: rgba(79, 192, 141, 0.05);
  border-radius: 8px;
  padding: 12px;
  transition: all 0.3s ease;
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
}

/* 小屏幕上的倒计时网格样式 */
@media (max-width: 480px) {
  .countdown-grid {
    grid-template-columns: 1fr;
  }
  
  .countdown-item {
    min-height: 70px;
    padding: 10px;
  }
}

.countdown-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(79, 192, 141, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

@media (max-width: 480px) {
  .countdown-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* 节假日特殊样式 */
.holiday-item {
  background: linear-gradient(
    to right,
    rgba(255, 88, 88, 0.05),
    rgba(255, 196, 88, 0.05)
  );
  border: 1px solid rgba(255, 88, 88, 0.1);
}

.holiday-icon {
  background: linear-gradient(135deg, #ff5858, #ffc458);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 88, 88, 0.3);
}

.countdown-info {
  flex: 1;
  overflow: hidden;
}

.countdown-label {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.countdown-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  word-break: break-word;
}

@media (max-width: 480px) {
  .countdown-label {
    font-size: 12px;
  }
  
  .countdown-value {
    font-size: 14px;
  }
}

.reset-btn-wrapper {
  margin-top: 8px;
}

.reset-btn {
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* 弹出层样式优化 */
:deep(.van-popup) {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

/* 游戏按钮样式 */
.game-button-container {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

.game-button {
  width: 80%;
  max-width: 320px;
  background: linear-gradient(135deg, #3f87ff, #2d5cff);
  border-radius: 12px;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(45, 92, 255, 0.3);
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.game-button:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(45, 92, 255, 0.2);
}

.game-icon {
  font-size: 20px;
  margin-right: 8px;
}

@media (max-width: 480px) {
  .game-button {
    width: 90%;
    font-size: 15px;
    padding: 10px 0;
  }
  
  .game-icon {
    font-size: 18px;
  }
}

/* 游戏弹出层样式 */
.game-popup {
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: #faf8ef;
  -webkit-overflow-scrolling: touch; /* iOS滚动优化 */
}

:deep(.game-popup) {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  max-height: 90%;
  height: auto !important; /* 覆盖内联样式 */
}

/* 适配iOS设备的安全区域 */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  :deep(.game-popup) {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.game-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #3f87ff, #2d5cff);
  color: white;
}

.game-popup-title {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.game-title-number {
  background: #edc22e;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  font-weight: bold;
}

.close-icon {
  font-size: 22px;
  color: white;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.game-popup .van-popup__close-icon) {
  top: 16px;
  right: 16px;
}

:deep(.van-picker-column__item) {
  font-size: 16px;
}

:deep(.van-picker__toolbar) {
  border-bottom: 1px solid #f2f2f2;
}

:deep(.van-picker__title) {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-color);
}

:deep(.van-picker__confirm) {
  color: var(--primary-color);
}
</style>
